<!--
 * @Author: y001554
 * @Date: 2023-01-16 20:11:08
 * @LastEditors: y001554
 * @LastEditTime: 2023-06-13 14:42:03
 * @FilePath: \ylwl\src\demos\pages.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by FE/ylwl, All Rights Reserved. 
-->

<template>
  <div class="pages">
    <M-Pages
      :extra-params="extraParams"
      :form-options="formOptions"
      :table-options="tableOptions"
      :request="request"
      :sticky="true"
    >
      <template #goodsName>
        <div style="width: 300px">紫外成的飞</div>
      </template>
    </M-Pages>
    <!-- {{ selectCells}} -->
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, Ref } from 'vue'
// import utils from '@@/utils/index'
defineOptions({
  name: 'Demos'
})

const extraParams = {
  type: 1,
  other: 12
}
const formOptions = {
  // rules: {
  //   username: [
  //     { required: true, message: 'Please input Activity name', trigger: 'blur' }
  //   ],
  //   usergroup: [
  //     { required: true, message: 'Please input Activity name', trigger: 'blur' }
  //   ]
  // },
  // size: 'large',
  customerProps: {
    showLabel: false
  },
  formModel: [
    {
      label: '班级',
      kayName: 'userunit',
      type: 'input'

      // autoLoadOptions: true,
      // optionsPromise: (item: any) => {
      //   return new Promise((rol, rej) => {
      //     setTimeout(() => {
      //       rol([
      //         {
      //           value: '123',
      //           label: '一班'
      //         },
      //         {
      //           value: '456',
      //           label: '二班'
      //         }
      //       ])
      //     }, 2000)
      //   })
      // }
    },
    {
      label: '兴趣爱好',
      kayName: 'userInterest',
      type: 'input',
      hideInSearch: true
      // options: [
      //   {
      //     value: '123',
      //     label: '篮球'
      //   },
      //   {
      //     value: '456',
      //     label: '羽毛球'
      //   }
      // ]
    },
    {
      label: '入学时间',
      kayName: 'usergroup',
      type: 'datePicker',
      options: [],
      iProps: {
        filterable: true,
        remote: true
        // style: 'width:460px'
        // multiple: true
      }
    },

    {
      label: '姓名',
      kayName: 'username',
      type: 'input'
    },
    {
      label: '学号',
      kayName: 'usernumber',
      type: 'number',
      fProps: {},
      iProps: {
        onChange: (e: number) => {
          console.log(e)
        },
        clearable: true
      },
      hideInSearch: true
    }
  ]
}

const tableModal = [
  {
    prop: 'goodsId',
    label: 'ID',
    iProps: {
      width: '200px'
    }
  },
  {
    prop: 'goodsNo',
    label: '商品编号',
    permission: () => true,
    iProps: {
      width: '300px'
    }
  },
  {
    prop: 'goodsName',
    label: '商品名称',
    iProps: {
      width: '300px',
      'show-overflow-tooltip': true
    },
    templete: true
  },
  {
    prop: 'goodsType',
    label: '商品类型',
    renderText: () => '字典项映射'
  }
]

const actionsModal = [
  {
    label: '编辑',
    type: 'primary',
    onclick: (e) => {
      alert(e)
    }
  },
  {
    label: '查看',
    onclick: (e) => {
      alert(e)
    },
    permission: () => true
  },
  {
    label: '操作1',
    onclick: (e) => {
      alert(e)
    },
    permission: 'testPermission'
    // inCollapse: false
  },
  {
    label: '删除',
    type: 'danger',
    onclick: (e) => {
      console.log('e', e)
    },
    permission: true,
    inCollapse: true
  }
]

const request = (params) =>
  new Promise((rol, rej) => {
    console.log('params', params)

    setTimeout(() => {
      rol({
        count: 105,
        list: [
          {
            goodsId: 2893,
            goodsNo: '355581346429762760301',
            goodsName:
              '(黑龙专属）太阳帽防紫外线夏日必备空顶帽户外遮阳透气女款',
            goodsTypeName: '单品',
            goodsType: 1,
            retailPrice: '29.90',
            price: null,
            darensharingRate: 0,
            tuanzhangRate: 0,
            platServiceRate: 0,
            techServiceRate: 0,
            skuNum: 1,
            agentPromoteStatus: '上架/推广中',
            dspStatus: 0,
            dspStatusName: '停止代发',
            checkDspStatus: 0
          },
          {
            goodsId: 1972,
            goodsNo: '358525400301088098001',
            goodsName:
              '02款棉马甲外套哑光加大棉衣22新款秋冬潮流棉服宽松坎肩男女外穿',
            goodsTypeName: '单品',
            goodsType: 1,
            retailPrice: '29.90',
            price: null,
            darensharingRate: 0,
            tuanzhangRate: 0,
            platServiceRate: 0,
            techServiceRate: 0,
            skuNum: 1,
            agentPromoteStatus: '上架/推广中',
            dspStatus: 0,
            dspStatusName: '停止代发',
            checkDspStatus: 0
          },
          {
            goodsId: 2895,
            goodsNo: '355581346429762760301',
            goodsName:
              '(黑龙专属）太阳帽防紫外线夏日必备空顶帽户外遮阳透气女款',
            goodsTypeName: '单品',
            goodsType: 1,
            retailPrice: '29.90',
            price: null,
            darensharingRate: 0,
            tuanzhangRate: 0,
            platServiceRate: 0,
            techServiceRate: 0,
            skuNum: 1,
            agentPromoteStatus: '上架/推广中',
            dspStatus: 0,
            dspStatusName: '停止代发',
            checkDspStatus: 0
          },
          {
            goodsId: 1975,
            goodsNo: '358525400301088098001',
            goodsName:
              '02款棉马甲外套哑光加大棉衣22新款秋冬潮流棉服宽松坎肩男女外穿',
            goodsTypeName: '单品',
            goodsType: 1,
            retailPrice: '29.90',
            price: null,
            darensharingRate: 0,
            tuanzhangRate: 0,
            platServiceRate: 0,
            techServiceRate: 0,
            skuNum: 1,
            agentPromoteStatus: '上架/推广中',
            dspStatus: 0,
            dspStatusName: '停止代发',
            checkDspStatus: 0
          },
          {
            goodsId: 2896,
            goodsNo: '355581346429762760301',
            goodsName:
              '(黑龙专属）太阳帽防紫外线夏日必备空顶帽户外遮阳透气女款',
            goodsTypeName: '单品',
            goodsType: 1,
            retailPrice: '29.90',
            price: null,
            darensharingRate: 0,
            tuanzhangRate: 0,
            platServiceRate: 0,
            techServiceRate: 0,
            skuNum: 1,
            agentPromoteStatus: '上架/推广中',
            dspStatus: 0,
            dspStatusName: '停止代发',
            checkDspStatus: 0
          },
          {
            goodsId: 1976,
            goodsNo: '358525400301088098001',
            goodsName:
              '02款棉马甲外套哑光加大棉衣22新款秋冬潮流棉服宽松坎肩男女外穿',
            goodsTypeName: '单品',
            goodsType: 1,
            retailPrice: '29.90',
            price: null,
            darensharingRate: 0,
            tuanzhangRate: 0,
            platServiceRate: 0,
            techServiceRate: 0,
            skuNum: 1,
            agentPromoteStatus: '上架/推广中',
            dspStatus: 0,
            dspStatusName: '停止代发',
            checkDspStatus: 0
          },
          {
            goodsId: 2897,
            goodsNo: '355581346429762760301',
            goodsName:
              '(黑龙专属）太阳帽防紫外线夏日必备空顶帽户外遮阳透气女款',
            goodsTypeName: '单品',
            goodsType: 1,
            retailPrice: '29.90',
            price: null,
            darensharingRate: 0,
            tuanzhangRate: 0,
            platServiceRate: 0,
            techServiceRate: 0,
            skuNum: 1,
            agentPromoteStatus: '上架/推广中',
            dspStatus: 0,
            dspStatusName: '停止代发',
            checkDspStatus: 0
          },
          {
            goodsId: 1977,
            goodsNo: '358525400301088098001',
            goodsName:
              '02款棉马甲外套哑光加大棉衣22新款秋冬潮流棉服宽松坎肩男女外穿',
            goodsTypeName: '单品',
            goodsType: 1,
            retailPrice: '29.90',
            price: null,
            darensharingRate: 0,
            tuanzhangRate: 0,
            platServiceRate: 0,
            techServiceRate: 0,
            skuNum: 1,
            agentPromoteStatus: '上架/推广中',
            dspStatus: 0,
            dspStatusName: '停止代发',
            checkDspStatus: 0
          },
          {
            goodsId: 2898,
            goodsNo: '355581346429762760301',
            goodsName:
              '(黑龙专属）太阳帽防紫外线夏日必备空顶帽户外遮阳透气女款',
            goodsTypeName: '单品',
            goodsType: 1,
            retailPrice: '29.90',
            price: null,
            darensharingRate: 0,
            tuanzhangRate: 0,
            platServiceRate: 0,
            techServiceRate: 0,
            skuNum: 1,
            agentPromoteStatus: '上架/推广中',
            dspStatus: 0,
            dspStatusName: '停止代发',
            checkDspStatus: 0
          },
          {
            goodsId: 1978,
            goodsNo: '358525400301088098001',
            goodsName:
              '02款棉马甲外套哑光加大棉衣22新款秋冬潮流棉服宽松坎肩男女外穿',
            goodsTypeName: '单品',
            goodsType: 1,
            retailPrice: '29.90',
            price: null,
            darensharingRate: 0,
            tuanzhangRate: 0,
            platServiceRate: 0,
            techServiceRate: 0,
            skuNum: 1,
            agentPromoteStatus: '上架/推广中',
            dspStatus: 0,
            dspStatusName: '停止代发',
            checkDspStatus: 0
          },
          {
            goodsId: 2899,
            goodsNo: '355581346429762760301',
            goodsName:
              '(黑龙专属）太阳帽防紫外线夏日必备空顶帽户外遮阳透气女款',
            goodsTypeName: '单品',
            goodsType: 1,
            retailPrice: '29.90',
            price: null,
            darensharingRate: 0,
            tuanzhangRate: 0,
            platServiceRate: 0,
            techServiceRate: 0,
            skuNum: 1,
            agentPromoteStatus: '上架/推广中',
            dspStatus: 0,
            dspStatusName: '停止代发',
            checkDspStatus: 0
          },
          {
            goodsId: 1979,
            goodsNo: '358525400301088098001',
            goodsName:
              '02款棉马甲外套哑光加大棉衣22新款秋冬潮流棉服宽松坎肩男女外穿',
            goodsTypeName: '单品',
            goodsType: 1,
            retailPrice: '29.90',
            price: null,
            darensharingRate: 0,
            tuanzhangRate: 0,
            platServiceRate: 0,
            techServiceRate: 0,
            skuNum: 1,
            agentPromoteStatus: '上架/推广中',
            dspStatus: 0,
            dspStatusName: '停止代发',
            checkDspStatus: 0
          },
          {
            goodsId: 3893,
            goodsNo: '355581346429762760301',
            goodsName:
              '(黑龙专属）太阳帽防紫外线夏日必备空顶帽户外遮阳透气女款',
            goodsTypeName: '单品',
            goodsType: 1,
            retailPrice: '29.90',
            price: null,
            darensharingRate: 0,
            tuanzhangRate: 0,
            platServiceRate: 0,
            techServiceRate: 0,
            skuNum: 1,
            agentPromoteStatus: '上架/推广中',
            dspStatus: 0,
            dspStatusName: '停止代发',
            checkDspStatus: 0
          },
          {
            goodsId: 2972,
            goodsNo: '358525400301088098001',
            goodsName:
              '02款棉马甲外套哑光加大棉衣22新款秋冬潮流棉服宽松坎肩男女外穿',
            goodsTypeName: '单品',
            goodsType: 1,
            retailPrice: '29.90',
            price: null,
            darensharingRate: 0,
            tuanzhangRate: 0,
            platServiceRate: 0,
            techServiceRate: 0,
            skuNum: 1,
            agentPromoteStatus: '上架/推广中',
            dspStatus: 0,
            dspStatusName: '停止代发',
            checkDspStatus: 0
          }
        ]
      })
    }, 300)
  })

const tableOptions = {
  tableModal: tableModal,
  actionsModal: actionsModal,

  rowKey: 'goodsId',
  customerProps: {
    showPagination: false,
    showCheck: true, //  显示多选
    showExpand: false,
    showIndex: false //  显示自动序号
  }
}
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
</script>
<style scoped>
.pages {
  width: 100%;
  height: 100vh;
}
</style>
